<template>
  <BasePage>
    <MyTable
      ref="$table"
      :columns="columns"
      :query-schemas="querySchemas"
      :get-data="dictApi.list"
      :index="true"
    >
      <template #handle>
        <AddButton @click="handleAdd">添加字典</AddButton>
      </template>
    </MyTable>
    <MyForm ref="$form" :model-form="model" :width="800" @submit="handleSubmit">
      <n-form-item
        label="字典名称"
        path="name"
        :rule="{ required: true, message: '请输入字典名称' }"
      >
        <n-input v-model:value="model.name" maxlength="50" show-count />
      </n-form-item>
      <n-form-item
        label="字典编码"
        path="code"
        :rule="{ required: true, message: '请输入字典编码' }"
      >
        <n-input v-model:value="model.code" maxlength="50" show-count />
      </n-form-item>
      <n-form-item label="字典描述" path="description">
        <n-input
          v-model:value="model.description"
          type="textarea"
          maxlength="100"
          clearable
          show-count
          :autosize="{
            minRows: 3,
          }"
        />
      </n-form-item>
      <template v-if="type !== 'add' && isRender">
        <MyTable
          ref="$childTable"
          :columns="childColumns"
          :get-data="() => dictApi.childList(model.id)"
          :index="true"
          :is-pagination="false"
          class="min-h-200"
        >
          <template #handle>
            <AddButton @click="handleChildAdd">添加字典项</AddButton>
          </template>
        </MyTable>
      </template>
    </MyForm>
    <MyForm
      ref="$childForm"
      :model-form="childModel"
      :label-width="100"
      @submit="handleChildSubmit"
    >
      <n-form-item
        label="字典项名称"
        path="name"
        :rule="{ required: true, message: '请输入字典项名称' }"
      >
        <n-input v-model:value="childModel.name" maxlength="50" show-count />
      </n-form-item>
      <n-form-item
        label="字典项编码"
        path="code"
        :rule="{ required: true, message: '请输入字典项编码' }"
      >
        <n-input v-model:value="childModel.code" maxlength="50" show-count />
      </n-form-item>
      <n-form-item label="字典项描述" path="description">
        <n-input
          v-model:value="childModel.description"
          type="textarea"
          maxlength="100"
          clearable
          show-count
          :autosize="{
            minRows: 3,
          }"
        />
      </n-form-item>
    </MyForm>
  </BasePage>
</template>
<script setup lang="jsx">
defineOptions({ name: 'DictManage' })
import * as dictApi from '@/api/dict'
import { useCrud } from '@/hooks/useCrud'
const querySchemas = [
  {
    field: 'name',
    component: 'NInput',
    componentProps: {
      placeholder: '字典名称',
    },
  },
]
const columns = [
  {
    title: '字典名称',
    key: 'name',
  },
  {
    title: '字典编码',
    key: 'code',
  },
  {
    title: '字典描述',
    key: 'description',
  },
  {
    title: '创建时间',
    key: 'createTime',
  },
  {
    title: '操作',
    key: 'actions',
    width: 180,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <ActionButton onClick={() => handleEdit(row)}>修改</ActionButton>
          <ActionButton onClick={() => handleDel(row)}>删除</ActionButton>
        </n-flex>
      )
    },
  },
]

const { type, model, $form, $table, handleAdd, handleEdit, handleDel, handleSubmit, isRender } =
  useCrud({
    name: '字典',
    initForm: {
      id: null,
      name: null,
      code: null,
      description: null,
    },
    apis: {
      add: dictApi.add,
      edit: dictApi.edit,
      del: ({ id }) => dictApi.del(id),
      view: ({ id }) => dictApi.info(id).then((res) => res.data),
    },
  })

const childColumns = [
  {
    title: '字典项名称',
    key: 'name',
  },
  {
    title: '字典项编码',
    key: 'code',
  },
  {
    title: '字典项描述',
    key: 'description',
  },
  {
    title: '创建时间',
    key: 'createTime',
  },
  {
    title: '操作',
    key: 'actions',
    width: 180,
    align: 'left',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <ActionButton onClick={() => handleChildEdit(row)}>修改</ActionButton>
          <ActionButton onClick={() => handleChildDel(row)}>删除</ActionButton>
        </n-flex>
      )
    },
  },
]

const {
  model: childModel,
  $form: $childForm,
  $table: $childTable,
  handleAdd: handleChildAdd,
  handleEdit: handleChildEdit,
  handleDel: handleChildDel,
  handleSubmit: handleChildSubmit,
} = useCrud({
  name: '字典项',
  initForm: {
    id: null,
    name: null,
    code: null,
    description: null,
  },
  apis: {
    add: dictApi.add,
    edit: dictApi.edit,
    del: ({ id }) => dictApi.del(id),
    view: ({ id }) => dictApi.info(id).then((res) => res.data),
  },
  submitFormat(data) {
    return { ...data, parentId: model.value.id }
  },
})
</script>
<style lang="scss" scoped></style>
